<template>
  <div class="checkout-address">
    <div class="text">
      <div class="none" v-if="!showAddress||!showAddressState">您需要先添加收货地址才可提交订单。</div>
      <ul v-else>
        <li><span>收<i />货<i />人：</span>{{showAddress.receiver}}</li>
        <li><span>联系方式：</span>{{showAddress.contact.replace(/^(\d{3})\d{4}(\d{4}$)/,'$1****$2')}}</li>
        <li><span>收货地址：</span>{{showAddress.fullLocation}}{{showAddress.address}}</li>
      </ul>
      <a @click="openAddressEdit(showAddress)" href="javascript:;">修改地址</a>
    </div>
    <div class="action">
      <XtxButton @click="openDialog" class="btn">切换地址</XtxButton>
      <XtxButton @click="openAddressEdit({})" class="btn">添加地址</XtxButton>
    </div>
  </div>
  <!-- 对话框组件(切换地址) -->
  <XtxDialog title="切换地址" v-model:visible="visibleDialog">
    <div @click="selectedAddress=item" :class="{active:selectedAddress&&selectedAddress.id===item.id}" class="text item"
      v-for="item in list" :key="item.id">
      <ul>
        <li><span>收<i />货<i />人：</span>{{item.receiver}}</li>
        <li><span>联系方式：</span>{{item.contact.replace(/^(\d{3})\d{4}(\d{4}$)/,'$1****$2')}}</li>
        <li><span>收货地址：</span>{{item.fullLocation.replace(/ /g,'')+item.address}}</li>
      </ul>
      <span class="close" @click="delAddress(item.id)">x</span>
    </div>
    <template #footer>
      <XtxButton @click="visibleDialog=false" type="gray" style="margin-right:20px">取消</XtxButton>
      <XtxButton @click="confirmAddressFn" type="primary">确认</XtxButton>
    </template>
  </XtxDialog>
  <!-- 收货地址添加与编辑组件 -->
  <AddressEdit @on-success="successHandler" ref="addressEditCom" />
</template>

<script>
import { ref } from 'vue'
import AddressEdit from './address-edit.vue'
import { delAddressAPI } from '@/api/order'
import Message from '@/components/lilbrary/Message'

export default {
  name: 'CheckoutAddress',
  components: {
    AddressEdit
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  emits: ['change', 'delAddress'],
  setup(props, { emit }) {
    const showAddress = ref(null)
    const showAddressState = ref(true) // 展示状态
    const dafaultAddress = props.list.find(item => item.isDefault === 0)
    if (dafaultAddress) {
      showAddress.value = dafaultAddress
    } else {
      if (props.list.length) {
        // eslint-disable-next-line vue/no-setup-props-destructure
        showAddress.value = props.list[0]
      }
    }

    // 弹窗显示隐藏
    const visibleDialog = ref(false)

    // 通知父组件收货地址ID
    emit('change', showAddress.value && showAddress.value.id)

    // 记录当前选中的地址ID
    const selectedAddress = ref(null)

    // 确认
    const confirmAddressFn = () => {
      if (!selectedAddress.value) return Message({ text: '请选择切换地址' })
      showAddressState.value = true
      showAddress.value = selectedAddress.value
      emit('change', selectedAddress.value.id)
      visibleDialog.value = false
    }

    // 打开弹窗
    const openDialog = () => {
      // 将之前选中的地址改为null
      selectedAddress.value = null
      visibleDialog.value = true
    }

    // 打开添加地址/修改地址对话框
    const addressEditCom = ref(null) // 获取子组件实例
    const openAddressEdit = (address) => {
      addressEditCom.value.open(address)
    }

    // 添加完地址后处理函数
    const successHandler = (formData) => {
      const address = props.list.find(item => item.id === formData.id)
      if (address) {
        // 修改
        for (const key in address) {
          address[key] = formData[key]
        }
      } else {
        // eslint-disable-next-line vue/no-mutating-props
        const jsonStr = JSON.stringify(formData)
        // eslint-disable-next-line vue/no-mutating-props
        props.list.unshift(JSON.parse(jsonStr))
        showAddress.value = props.list.find(item => item.isDefault === 0)
        showAddressState.value = true
      }
    }

    // 删除切换地址中已经存在的地址
    const delAddress = (selectedAddressId) => {
      const id = selectedAddressId
      delAddressAPI(id).then(() => {
        Message({ type: 'success', text: '删除地址成功' })
        if (showAddress.value.id === id) {
          showAddressState.value = false
        }
        emit('delAddress')
      })
    }

    return { showAddress, visibleDialog, selectedAddress, confirmAddressFn, openDialog, openAddressEdit, addressEditCom, successHandler, delAddress, showAddressState }
  }
}
</script>
<style scoped lang="less">
.checkout-address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;

  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }

    >ul {
      flex: 1;
      padding: 20px;

      li {
        line-height: 30px;

        span {
          color: #999;
          margin-right: 5px;

          >i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }

    >a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }

  .action {
    width: 420px;
    text-align: center;

    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;

      &:first-child {
        margin-right: 10px;
      }
    }
  }
}

.xtx-dialog {

  .text {
    position: relative;
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    .close {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      font-size: 20px;
      color: #bbb;
    }

    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;

      &.active,
      &:hover {
        border-color: @xtxColor;
        background: lighten(@xtxColor, 50%);
      }

      >ul {
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
}
</style>
